<!doctype html>
<html class="echarts-dashboard">

<head>
    <meta charset="utf-8">
    <title>Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="scripts/bootstrap.min.css" rel="stylesheet">
    <link href="report_paint.css" rel="stylesheet">
</head>

<body class="echarts-dashboard">
    <div class="container-fluid echarts-dashboard">
        <div class="text-center">
            <h2 id="title" class="title">喷漆室</h2>
        </div>
        <div class="text-right">
            <input id="language-change" class="btn btn-primary btn-sm btn-change" type="button" value="中文/English" />
        </div>

        <div class="row echarts-row m-auto">
            <div class="col-md-6 col-lg-8" id="echarts-wind-pressure"></div>
            <div class="col-md-6 col-lg-4" id="echarts-usage"></div>
        </div>
        <div class="row echarts-row m-auto">
            <div class="col-md-6 col-lg-8" id="echarts-pressure"></div>
            <div class="col-md-6 col-lg-4" id="echarts-environment"></div>
        </div>
    </div>
    <script type="text/javascript" src="scripts/jquery.slim.min.js"></script>
    <script type="text/javascript" src="scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="scripts/echarts.min.js"></script>
    <script type="text/javascript">
        var domWindPressure = document.getElementById("echarts-wind-pressure");
        var domUsage = document.getElementById("echarts-usage");
        var domPressure = document.getElementById("echarts-pressure");
        var domEnvironment = document.getElementById("echarts-environment");
        var windPressureChart = echarts.init(domWindPressure);
        var usageChart = echarts.init(domUsage);
        var pressureChart = echarts.init(domPressure);
        var environmentChart = echarts.init(domEnvironment);
        var displayLanguage = null;
        var app = {};
        optionWindPressure = null;
        optionUsage = null;
        optionPressure = null;
        optionEnvironment = null;
        optionWindPressure = {
            title: {
                text: '风压、负压显示',
                left: '2%',
                top: '2%'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function (params) {
                    var tar;
                    if (params[1].value != '-') {
                        tar = params[1];
                    } else {
                        tar = params[2];
                    }
                    return tar.name + '<br />' + tar.seriesName + ' : ' + tar.value;
                }
            },
            legend: {
                data: ['风压', '负压'],
                right: '4%',
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                splitLine: {
                    show: false
                },
                data: function () {
                    var list = [];
                    for (var i = 1; i <= 11; i++) {
                        list.push('11月' + i + '日');
                    }
                    return list;
                }()
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                    name: '辅助',
                    type: 'bar',
                    stack: '总量',
                    itemStyle: {
                        normal: {
                            barBorderColor: 'rgba(0,0,0,0)',
                            color: 'rgba(0,0,0,0)'
                        },
                        emphasis: {
                            barBorderColor: 'rgba(0,0,0,0)',
                            color: 'rgba(0,0,0,0)'
                        }
                    },
                    data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292]
                },
                {
                    name: '负压',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-']
                },
                {
                    name: '风压',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'bottom'
                        }
                    },
                    data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203]
                }
            ]
        };
        optionUsage = {
            title: {
                text: '用量显示',
                x: 'left'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },
            // legend: {
            //     x: 'right',
            //     data: ['rose1', 'rose2', 'rose3', 'rose4'],
            //     itemGap: 5,
            // },
            toolbox: {
                show: true,
                // top: '20px',
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel']
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            calculable: true,
            series: [{
                name: '用量',
                type: 'pie',
                radius: [12, 100],
                roseType: 'area',
                data: [{
                        value: 10,
                        name: 'rose1'
                    },
                    {
                        value: 5,
                        name: 'rose2'
                    },
                    {
                        value: 15,
                        name: 'rose3'
                    },
                    {
                        value: 25,
                        name: 'rose4'
                    }
                ]
            }]
        };
        optionPressure = {
            color: ['#F99', '#ABA'],
            title: {
                text: '消防、油漆压力显示',
                top: '2%',
                left: '2%'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['消防', '油漆压力'],
                top: '2%',
                right: '2%'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                    name: '消防',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {
                        normal: {}
                    },
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: '油漆压力',
                    type: 'line',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    areaStyle: {
                        normal: {}
                    },
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };
        optionEnvironment = {
            title: {
                text: '温湿度显示',
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {
                        readOnly: false
                    },
                    magicType: {
                        type: ['line', 'bar']
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} °C'
                }
            },
            series: [{
                    name: '最高气温',
                    type: 'line',
                    data: [11, 11, 15, 13, 12, 13, 10],
                    markPoint: {
                        data: [{
                                type: 'max',
                                name: '最大值'
                            },
                            {
                                type: 'min',
                                name: '最小值'
                            }
                        ]
                    },
                    markLine: {
                        data: [{
                            type: 'average',
                            name: '平均值'
                        }]
                    }
                },
                {
                    name: '最低气温',
                    type: 'line',
                    data: [1, -2, 2, 5, 3, 2, 0],
                    markPoint: {
                        data: [{
                            name: '周最低',
                            value: -2,
                            xAxis: 1,
                            yAxis: -1.5
                        }]
                    },
                    markLine: {
                        data: [{
                                type: 'average',
                                name: '平均值'
                            },
                            [{
                                symbol: 'none',
                                x: '90%',
                                yAxis: 'max'
                            }, {
                                symbol: 'circle',
                                label: {
                                    normal: {
                                        position: 'start',
                                        formatter: '最大值'
                                    }
                                },
                                type: 'max',
                                name: '最高点'
                            }]
                        ]
                    }
                }
            ]
        };
        if (!!optionEnvironment && !!optionPressure && !!optionUsage && !!optionWindPressure) {
            environmentChart.setOption(optionEnvironment, true);
            pressureChart.setOption(optionPressure, true);
            usageChart.setOption(optionUsage, true);
            windPressureChart.setOption(optionWindPressure, true);
            displayLanguage = 'chinese';
        }
        $(document).ready(function () {
            $("#language-change").click(function () {
                if (displayLanguage === 'chinese') {
                    $("#title").text("Printing Room");
                    environmentChart.setOption({
                        title: {
                            text: 'Temperature',
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        },
                        series: [{
                                name: 'Highest Temp',
                                type: 'line',
                                data: [11, 11, 15, 13, 12, 13, 10],
                                markPoint: {
                                    data: [{
                                            type: 'max',
                                            name: 'Max Value'
                                        },
                                        {
                                            type: 'min',
                                            name: 'Min Value'
                                        }
                                    ]
                                },
                                markLine: {
                                    data: [{
                                        type: 'average',
                                        name: 'Average Value'
                                    }]
                                }
                            },
                            {
                                name: 'Lowest Temp',
                                type: 'line',
                                data: [1, -2, 2, 5, 3, 2, 0],
                                markPoint: {
                                    data: [{
                                        name: 'Lowest of the Week',
                                        value: -2,
                                        xAxis: 1,
                                        yAxis: -1.5
                                    }]
                                },
                                markLine: {
                                    data: [{
                                            type: 'average',
                                            name: 'Average Value'
                                        },
                                        [{
                                            symbol: 'none',
                                            x: '90%',
                                            yAxis: 'max'
                                        }, {
                                            symbol: 'circle',
                                            label: {
                                                normal: {
                                                    position: 'start',
                                                    formatter: 'Max Value'
                                                }
                                            },
                                            type: 'max',
                                            name: 'Highest Value'
                                        }]
                                    ]
                                }
                            }
                        ]
                    });
                    pressureChart.setOption({
                        title: {
                            text: 'Pressure Display',
                            top: '2%',
                            left: '2%'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        legend: {
                            data: ['Distinguish', 'Paint'],
                            top: '2%',
                            right: '2%'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [{
                            type: 'category',
                            boundaryGap: false,
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        }],
                        yAxis: [{
                            type: 'value'
                        }],
                        series: [{
                                name: 'Distinguish',
                                type: 'line',
                                stack: 'Sum',
                                areaStyle: {
                                    normal: {}
                                },
                                data: [320, 332, 301, 334, 390, 330, 320]
                            },
                            {
                                name: 'Paint',
                                type: 'line',
                                stack: 'Sum',
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top'
                                    }
                                },
                                areaStyle: {
                                    normal: {}
                                },
                                data: [820, 932, 901, 934, 1290, 1330, 1320]
                            }
                        ]
                    });
                    usageChart.setOption({
                        title: {
                            text: 'Usage Display',
                            x: 'left'
                        },
                        series: [{
                            name: 'Usage',
                            type: 'pie',
                            radius: [12, 100],
                            roseType: 'area',
                            data: [{
                                    value: 10,
                                    name: 'rose1'
                                },
                                {
                                    value: 5,
                                    name: 'rose2'
                                },
                                {
                                    value: 15,
                                    name: 'rose3'
                                },
                                {
                                    value: 25,
                                    name: 'rose4'
                                }
                            ]
                        }]
                    });
                    windPressureChart.setOption({
                        title: {
                            text: 'P&N Wind Pressure',
                            left: '2%',
                            top: '2%'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            },
                            formatter: function (params) {
                                var tar;
                                if (params[1].value != '-') {
                                    tar = params[1];
                                } else {
                                    tar = params[2];
                                }
                                return tar.name + '<br />' + tar.seriesName + ' : ' + tar.value;
                            }
                        },
                        legend: {
                            data: ['Pos Pressure', 'Neg Pressure'],
                            right: '4%',
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            splitLine: {
                                show: false
                            },
                            data: function () {
                                var list = [];
                                for (var i = 1; i <= 11; i++) {
                                    switch (i) {
                                        case 1:
                                            list.push('Nov ' + i + 'st');
                                            break;
                                        case 2:
                                            list.push('Nov ' + i + 'nd');
                                            break;
                                        case 3:
                                            list.push('Nov ' + i + 'rd');
                                            break;
                                        default:
                                            list.push('Nov ' + i + 'th');
                                    }
                                }
                                return list;
                            }()
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                                name: 'Support',
                                type: 'bar',
                                stack: 'Sum',
                                itemStyle: {
                                    normal: {
                                        barBorderColor: 'rgba(0,0,0,0)',
                                        color: 'rgba(0,0,0,0)'
                                    },
                                    emphasis: {
                                        barBorderColor: 'rgba(0,0,0,0)',
                                        color: 'rgba(0,0,0,0)'
                                    }
                                },
                                data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856,
                                    1495, 1292
                                ]
                            },
                            {
                                name: 'Neg Pressure',
                                type: 'bar',
                                stack: 'Sum',
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top'
                                    }
                                },
                                data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-',
                                    '-'
                                ]
                            },
                            {
                                name: 'Pos Pressure',
                                type: 'bar',
                                stack: 'Sum',
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'bottom'
                                    }
                                },
                                data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361,
                                    203
                                ]
                            }
                        ]
                    });
                    displayLanguage = 'English';
                } else {
                    environmentChart.setOption(optionEnvironment, true);
                    pressureChart.setOption(optionPressure, true);
                    usageChart.setOption(optionUsage, true);
                    windPressureChart.setOption(optionWindPressure, true);
                    displayLanguage = 'chinese';
                    $("#title").text("喷漆室");
                }
            });
        });
    </script>

</body>

</html>